/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="gis-duteRoute" v-if="isPanelShow">
    <div class="zoom-left" v-show="isZoomShow">
      <TerminalLock :curDevice="curDevice"
                    :operation="operation"
                    :isConfigShow="isZoomShow"
                    :zoomBiz="zoomBiz"
                    @onSaveClick="onConfigSaveClick"
                    @onCloseClick="onLeftCloseClick"
                    ></TerminalLock>
    </div>
    <div class="route-header">
      <div class="title">
        <el-tooltip v-if="route && route.name && route.name.length > 25" placement="bottom-start" effect="dark">
          <div slot="content">{{route && route.name}}</div>
          <span class="devname">{{route && route.name.substr(0, 25) + '...'}}</span>
        </el-tooltip>
        <span v-else>{{route && route.name}}</span>
      </div>
      <div class="close" @click="onCloseClick"><i class="el-icon-close"></i></div>
    </div>
    <div class="batch-control">
      <div class="dev-count">
        <span class="count" :style="route.type === 1 ? {'color': '#e0ac24'} : {'color': '#37ccaa'}">{{route.devs ? route.devs.length : 0}}</span>
        <span class="text">个路口</span>
      </div>
      <div class="control">
        <div class="btn">
          <div class="btn-icon">
            <i class="iconfont icon-piliangzhihang" ></i>
          </div>
          <div class="btn-text">
            <el-button type="text" size="small" @click="onExecuteNowClick">{{$t('openatc.dutyroute.batchExecute')}}</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="devicePanel">
      <routePreview ref="updateChild"
                    :route="route"
                    @onPlayClick="onPlayClick"
                    @onConfigClick="onConfigClick"
                    @research="research"
                    @onCardClick="onCardClick"></routePreview>
    </div>
    <select-control v-show="false" ref="selectControl"></select-control>
    <PlanExecute ref="planExecute"
        @research="onResearch"></PlanExecute>
  </div>
</template>
<script>
// @ts-ignore
import L from 'leaflet'
// @ts-ignore
import 'leaflet-polylinedecorator'
import { GetAllViproutes, GetSingleViproute, GetViprouteStatus } from '../../../../api/service'
import { SystemconfigApi } from '../../../../api/systemconfig.js'
import { GetRouteVideos } from '../../../../api/deviceVideo'
import { GetAllDevice, GetDeviceByIds } from '../../../../api/device'
import { putControl, lockPhase } from '../../../../api/control'
// @ts-ignore
import routePreview from './routePreview'
// @ts-ignore
import SelectControl from '../../../../views/Service/components/SelectControl'
import { getMessageByCode } from '../../../../utils/responseMessage'
// @ts-ignore
import PlanExecute from '../../../Service/components/planExecute.vue'
import Flv from '../../../../components/Flvjs/index.vue'
import TerminalLock from '../../../../components/TerminalLock/index.vue'

export default {
  name: 'dutyRoute',
  components: { routePreview, SelectControl, PlanExecute, Flv, TerminalLock },
  props: {
    isShowPanel: {
      type: Boolean,
      default: true
    },
    params: {
      type: Object,
      default: () => {
        return {
          type: '1', // '1' intersection '2' route
          row: {}
        }
      }
    }
  },
  data () {
    return {
      operation: 'config',
      type: 'save',
      zoomBiz: 'play',
      roadDirection: 'right',
      defaultIndex: 0, // 0
      isZoomShow: false,
      isPanelShow: true,
      map: null,
      lngLat: {
        lng: '0.00000000',
        lat: '0.00000000'
      },
      editDevicevisible: false,
      devicesTableData: [],
      messageboxVisible: false,
      listLoading: false, // 表格数据加载等待动画
      curDevice: undefined, // 当前所选设备信息
      manualInfo: {},
      loading: false,
      // @ts-ignore
      deviceFaultIcon: require('../../../../assets/gis/devicefault.png'),
      // @ts-ignore
      deviceOnlineIcon: require('../../../../assets/gis/deviceonline.png'),
      // @ts-ignore
      deviceNotOnlineIcon: require('../../../../assets/gis/devicenotonline.png'),
      deviceLayer: null,
      devList: [],
      routeList: [],
      lineArr: [],
      routeVideoArr: [],
      chooseId: 0,
      options: {
        weight: 10,
        color: '#909399'
      },
      newOptions: {
        weight: 12,
        color: '#37ccaa'
      },
      popup: null,
      route: {},
      deviceIds: [],
      testVideoList: [
        {
          id: 1,
          name: '视频1',
          url: 'ws://192.168.13.104:38080/live/video4.flv?st=1619332780604'
        },
        {
          id: 2,
          name: '视频2',
          url: 'ws://192.168.13.104:38080/live/TESTID.flv?st=1619332798860'
        },
        {
          id: 3,
          name: '视频3',
          url: 'ws://192.168.13.104:38080/live/demo5.flv?st=1619332812724'
        }
        // {
        //   id: 4,
        //   name: '视频4',
        //   url: 'http://192.168.14.195:90/video/123.mp4'
        // }
      ],
      isShowVideo: false,
      autoPlay: true
    }
  },
  watch: {
    params: {
      // @ts-ignore
      // @ts-ignore
      handler: function (val, oldVal) {
        console.log('received params:', val)
        if (val && val.row) {
          this.chooseId = val.row.id
          // @ts-ignore
          this.isZoomShow = false
          // @ts-ignore
          this.routeData = val.row
          this.chooseId = this.routeData.id
          // @ts-ignore
          this.map = window.map
          this.onRouteChange()
        } else {
          // todo
        }
      },
      // 深度观察监听
      deep: true
    },
    // @ts-ignore
    // @ts-ignore
    // @ts-ignore
    async chooseId (val) {
      // this.onRouteChange()
    }
  },
  async beforeCreate () {
  },
  async mounted () {
    this.isPanelShow = this.isShowPanel
    var doms = document.getElementsByClassName('showLayout')
    if (!doms || doms.length === 0) {
      return false
    }
    let w = doms[0]
    // @ts-ignore
    this.containerWidth = w.style.width
    // @ts-ignore
    this.containerHeight = w.style.height
    let _this = this
    await this.getAllAdevice()
    this.$nextTick(() => {
      // @ts-ignore
      _this.map = window.map
      _this.getList()
      _this.isShowVideos()
    })
  },
  destroyed () {
    this.hideLayer()
    var doms = document.getElementsByClassName('showLayout')
    if (!doms || doms.length === 0) {
      return false
    }
    let w = doms[0]
    // @ts-ignore
    w.style.width = this.containerWidth
    // @ts-ignore
    w.style.height = this.containerHeight
  },
  methods: {
    onConfigSaveClick (res) {
      console.log('onConfigSave', res)
    },
    async onRouteChange () {
      await this.getAllAdevice()
      this.setRoute()
      await this.onDeviceIdsChange()
      if (this.map) {
        const routeDevs = this.routeData.devs
        this.drawMarkers(routeDevs)
        if (this.params.type === '2') {
          this.drawLines(this.routeData)
        }
      }
    },
    onRecoverClick () {
      const recoverData = {
        control: 0,
        terminal: 0,
        value: 0,
        delay: 0,
        duration: 0
      }
      const reqData = {
        param: recoverData,
        // @ts-ignore
        agentid: this.curDevice.agentid
      }
      this.putControl(reqData)
    },
    onExecClick () {
      const reqData = {
        // @ts-ignore
        param: this.curDevice.data,
        // @ts-ignore
        agentid: this.curDevice.agentid
      }
      // @ts-ignore
      if (!this.curDevice.data.direction || this.curDevice.data.direction.length === 0) {
        this.$message.error(this.$t('openatccomponents.overview.directionnull'))
        return
      }
      this.putControl(reqData)
      // this.handleManualControl()
    },
    onSureClick () {
      this.$emit('onSaveClick', this.manualInfo)
      this.isZoomShow = false
    },
    handleClickCrossIcon (allChoosedDir, curClickedPhase) {
      // @ts-ignore
      this.curDevice.data.direction = allChoosedDir.direction
      // @ts-ignore
      this.curDevice.data.peddirection = allChoosedDir.peddirection
      console.log('handleClickCrossIcon', allChoosedDir, curClickedPhase)
    },
    onLockDirectionClick (allChoosedDir, curClickedPhase) {
      console.log('handleClickCrossIcon', allChoosedDir, curClickedPhase)
    },
    async putControl (reqData) {
      let message = ''
      let data = await putControl(reqData)
      let success = 0
      // @ts-ignore
      if (!data.data.success) {
        // @ts-ignore
        message = getMessageByCode(data.data.code, this.$i18n.locale)
      } else {
        // @ts-ignore
        if (data.data.data && data.data.data.data) {
          // @ts-ignore
          success = data.data.data.data.success
          if (success !== 0) {
            let errormsg = 'openatccomponents.overview.putTscControlError' + success
            message = errormsg
          }
        }
      }
      if (message === '') {
        this.$message.success(this.$t('openatccomponents.common.download'))
      } else {
        this.$message.success(message)
      }
      return message
    },
    handleManualControl () {
      // if (!this.curDevice.data.directions || this.curDevice.data.directions.length === 0) {
      //   this.$message.error(this.$t('openatccomponents.overview.directionnull'))
      //   return
      // }
      let submitdata = {}
      // @ts-ignore
      submitdata = {...this.curDevice.data}
      // submitdata = {'agentid': '14000000112345', 'direction': [1], 'greenflash': 6, 'duration': 600, 'yellow': 3, 'redclear': 2, 'mingreen': 15}
      // @ts-ignore
      lockPhase(submitdata).then(res => {
        if (!res.data.success) {
          if (res.data.code === '4002' && res.data.data.errorCode === '4209') {
            let success = res.data.data.content.success
            if (success !== 0) {
              let errormsg = 'openatccomponents.overview.putTscControlError' + success
              this.$message.error(this.$t(errormsg))
              return
            }
          }
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        this.$message.success(this.$t('openatccomponents.common.download'))
        // if (res.data.success !== true) {
        //   this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
        // }
      })
    },
    handleBatchExec () {
      if (!this.routeData) {
        return false
      }
      const routeData = this.routeData
      let planContent = this.$refs.planExecute
      // @ts-ignore
      planContent.onExecuteClick(this.route.id, routeData)
    },
    // @ts-ignore
    // @ts-ignore
    // @ts-ignore
    onResearch (rotue) {
      // if (rotue) {
      //   // @ts-ignore
      //   this.chooseId = rotue.id
      // }
      // this.$emit('research', rotue)
      this.setRoute()
    },
    onExecuteNowClick () {
      this.handleBatchExec()
    },
    onRecoverNowClick () {
      this.handleBatchExec()
    },
    onLeftCloseClick () {
      this.isZoomShow = false
    },
    onCloseClick () {
      this.$emit('onCloseClick')
      this.isPanelShow = !this.isPanelShow
    },
    async getAllAdevice () {
      // @ts-ignore
      await GetAllDevice().then(res => {
        if (!res.data.success) {
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        // @ts-ignore
        this.allDevList = res.data.data
      })
    },
    getControlName (control) {
      let res
      // @ts-ignore
      const selectControl = this.$refs.selectControl
      // @ts-ignore
      res = selectControl ? selectControl.getNameById(control) : ''
      return res
    },
    getRouteVideos () {
      let _this = this
      // @ts-ignore
      return new Promise((resolve, reject) => {
        // @ts-ignore
        GetRouteVideos(_this.deviceIds).then(res => {
          if (!res.data.success) {
            _this.$message.error(getMessageByCode(res.data.code, _this.$i18n.locale))
            return
          }
          _this.routeVideoArr = res.data.data
          resolve(_this.routeVideoArr)
        })
      })
    },
    getSingleViproute () {
      let _this = this
      // @ts-ignore
      return new Promise((resolve, reject) => {
        // @ts-ignore
        GetSingleViproute(_this.chooseId).then(res => {
          if (!res.data.success) {
            _this.$message.error(getMessageByCode(res.data.code, _this.$i18n.locale))
            return
          }
          // @ts-ignore
          _this.routeData = res.data.data
          if (!_this.routeData || _this.routeData.length === 0) {
            // @ts-ignore
            _this.maskVisible = true
            // 模拟一次手动点击，触发tip显示
            // @ts-ignore
            _this.$refs.editbtn.click()
          }
          resolve(_this.routeData)
        })
      })
    },
    getViprouteStatus () {
      let _this = this
      // @ts-ignore
      return new Promise((resolve, reject) => {
        // @ts-ignore
        GetViprouteStatus(_this.chooseId).then(res => {
          if (!res.data.success) {
            _this.$message.error(getMessageByCode(res.data.code, _this.$i18n.locale))
            // @ts-ignore
            resolve()
          }
          let stateList = res.data.data
          // @ts-ignore
          _this.stateList = stateList
          resolve(stateList)
        })
      })
    },
    getDeviceByIds () {
      // 获取设备表格信息
      // @ts-ignore
      this.devicesData = []
      let _this = this
      // @ts-ignore
      return new Promise((resolve, reject) => {
        _this.deviceIds = _this.routeData.devs.map(ele => ele.agentid)
        // @ts-ignore
        GetDeviceByIds(_this.deviceIds).then(res => {
          if (!res.data.success) {
            _this.$message.error(getMessageByCode(res.data.code, _this.$i18n.locale))
            // @ts-ignore
            resolve()
          }
          // @ts-ignore
          _this.devicesData = res.data.data
          resolve(_this.devicesData)
        })
      })
    },
    async setRoute () {
      if (!this.chooseId || this.chooseId === 0) {
        return false
      }
      await this.getSingleViproute()
      await this.getViprouteStatus()
      await this.getDeviceByIds()
      await this.getRouteVideos()
      let pointArr = []
      for (let item of this.routeData.devs) {
        if (!item.geometry || !item.geometry.coordinates) {
          console.log('no geometry: ' + item)
          continue
        }
        pointArr.push(item.geometry.coordinates)
        for (let state of this.stateList) {
          if (item.agentid === state.agentid) {
            item.state = state.state
            item.resttime = state.resttime
            let controlName = this.getControlName(item.data.control)
            item.controlName = controlName
            for (let dev of this.devicesData) {
              if (item.agentid === dev.agentid) {
                item.stateName = dev.state
              }
              let videos = []
              for (let vi of this.routeVideoArr) {
                // @ts-ignore
                if (item.agentid === vi.agentid) {
                  videos.push(vi)
                }
              }
              item.videos = videos
              // item.videos = this.testVideoList // 测试数据
            }
            break
          }
        }
      }
      if (this.routeData) {
        this.routeData.isShowVideo = this.isShowVideo
      }
      this.route = this.routeData
      this.$emit('onRouteChange', pointArr)
    },
    getAllViproutes () {
      // @ts-ignore
      let _this = this
      // @ts-ignore
      GetAllViproutes().then(res => {
        if (!res.data.success) {
          _this.$message.error(getMessageByCode(res.data.code, _this.$i18n.locale))
          return
        }
        _this.routeList = res.data.data
        _this.devicesTableData = _this.routeList
        // @ts-ignore
        _this.routeData = _this.routeList[_this.defaultIndex]
        _this.chooseId = _this.routeData.id
        // const routeDevs = _this.routeData.devs
        // _this.drawMarkers(routeDevs)
        // if (_this.params.type === '1') {
        //   _this.drawLines(_this.routeData)
        // }
      })
    },
    async drawMarkers (routeDevs) {
      this.devList = []
      // for (let item of this.routeList) {
      for (let dev of routeDevs) {
        let list = this.allDevList.filter(ele => ele.agentid === dev.agentid)
        if (list && list.length === 1) {
          dev.state = list[0].state
        }
        // @ts-ignore
        this.devList.push(dev)
      }
      // }
      this.handleMapDevice(this.devList)
    },
    drawLines (item) { // routeData
      this.hideLineLayer()
      // for (let item of this.routeList) {
      let latlngs = []
      for (let dev of item.devs) {
        if (!dev.geometry || !dev.geometry.coordinates) {
          console.log('no geometry: ' + dev)
          continue
        }
        let coordinates = dev.geometry.coordinates
        latlngs.push(coordinates.slice().reverse())
      }
      if (latlngs) {
        let options = this.options
        if (item.id === this.chooseId) {
          options = this.newOptions
        }
        let res = this.drawLine(latlngs, options)
        if (item.id === this.chooseId) {
          // @ts-ignore
          this.oldLine = res.routeLine
        }
        let record = {
          id: res.lineId,
          routeLine: res.routeLine,
          decorator: res.decorator,
          route: item
        }
        // @ts-ignore
        this.lineArr.push(record)
      }
      // }
    },
    handleMapDevice (devs) {
      if (this.deviceLayer) {
        // @ts-ignore
        this.deviceLayer.clearLayers()
      }
      let markers = []
      const avgIndex = Math.floor(devs.length / 2)
      for (let i = 0; i < devs.length; i++) {
        let dev = devs[i]
        if (!dev.geometry || !dev.geometry.coordinates) {
          console.log('no geometry: ' + dev)
          continue
        }
        let coordinates = dev.geometry.coordinates
        let devPoint = [coordinates[1], coordinates[0]]
        let iconUrl = this.deviceOnlineIcon
        if (dev.state === 'UP') {
          iconUrl = this.deviceOnlineIcon
        } else if (dev.state === 'DOWN') {
          iconUrl = this.deviceNotOnlineIcon
        } else if (dev.state === 'Fault') {
          iconUrl = this.deviceFaultIcon
        }
        const circleClass = 'lmap-span ' + (this.params.type === '1' ? 'lmap-span-group' : 'lmap-span-route')
        const html = `<div class="lmap-container"><div class="${circleClass}">${i + 1}</div><img class="lmap-image" src="${iconUrl}"/></div>`
        let DefaultIcon2 = L.divIcon({
          title: dev.state,
          alt: dev,
          className: 'lmap-icon',
          html: html,
          iconSize: [43, 31], //  图标的大小
          // shadowSize: [41, 41], //  影子的大小
          iconAnchor: [14, 45], //  图标将对应标记点的位置
          // shadowAnchor: [4, 62], // 相同的影子
          popupAnchor: [1, -24] // 该点是相对于iconAnchor弹出信息的位置
        })
        let marker = L.marker(devPoint, { icon: DefaultIcon2 }).on('click', this.onMarkerClick)
        if (i === avgIndex) {
          // @ts-ignore
          this.map && this.map.flyTo(devPoint)
        }
        // 添加marker来设置点击事件
        markers.push(marker)
      }
      this.deviceLayer = L.layerGroup(markers)
      // @ts-ignore
      this.map && this.map.addLayer(this.deviceLayer)
      this.addMessage()
    },
    // @ts-ignore
    onMarkerClick (e) {
      // let dev = e.target.options.icon.options.alt
      // let row = this.devList.filter(item => item.id === dev.id)[0]
      // this.setCurrent(row)
    },
    addMessage () {
      let _this = this
      // @ts-ignore
      this.deviceLayer.eachLayer(function (layer) {
        let options = layer.options.icon.options
        let devData = options.alt
        let content = _this.getPopupContent(devData)
        layer.bindPopup(content)
      })
    },
    getPopupContent (devData) {
      let agentid = devData.name
      let content =
      `
        <div> ${this.$t('openatc.gis.crossRoad')}${agentid}</div>
      `
      return content
    },
    getTag (row) {
      if (row.state === 'DOWN') {
        return {
          label: this.$t('openatc.devicemanager.offline'),
          type: 'info'
        }
      } else {
        if (row.status === 0) {
          // 数据从设备端来，暂时写死，0代表正常状态，其余数字均代表一种类型的故障
          return {
            label: this.$t('openatc.devicemanager.online'),
            type: 'success'
          }
        } else {
          return {
            label: this.$t('openatc.devicemanager.fault'),
            type: 'danger'
          }
        }
      }
    },
    handleEdit (row) {
      this.curDevice = row
      let updateChild = this.$refs.updateChild
      // @ts-ignore
      updateChild.onUpdateClick(row)
    },
    setNewLocation (lngLat) {
      // @ts-ignore
      this.curDevice.lng = lngLat.lng
      // @ts-ignore
      this.curDevice.lat = lngLat.lat
      let updateChild = this.$refs.updateChild
      // @ts-ignore
      updateChild.onUpdateClick(this.curDevice, true)
    },
    onLocationClick (row) {
      // @ts-ignore
      this.setDeviceLocation(row)
      this.$message.info(this.$t('openatc.gis.chooseLocationInfo'))
    },
    setDeviceLocation () {
      // @ts-ignore
      this.editMode = true
      let _this = this
      // @ts-ignore
      _this.map.on('click', function (e) {
        _this.lngLat.lng = String(e.latlng.lng)
        _this.lngLat.lat = String(e.latlng.lat)
        _this.setNewLocation(_this.lngLat)
        // @ts-ignore
        _this.map.off('click')
      })
    },
    onDetailClick (row) {
      const dev = row
      let edgeModalChild = this.$refs.edgeModalChild
      // @ts-ignore
      edgeModalChild.openSingleEdge(dev)
    },
    getList () {
      this.getAllViproutes()
    },
    hideLayer () {
      if (this.deviceLayer) {
        // @ts-ignore
        this.map && this.map.removeLayer(this.deviceLayer)
      }
      if (this.popup) {
        // @ts-ignore
        this.map && this.map.removeLayer(this.popup)
      }
      this.hideLineLayer()
    },
    hideLineLayer () {
      for (let i = 0; i < this.lineArr.length; i++) {
        let item = this.lineArr[i]
        // @ts-ignore
        this.map && this.map.removeLayer(item.routeLine)
        // @ts-ignore
        this.map && this.map.removeLayer(item.decorator)
      }
      this.lineArr = []
    },
    showLayer () {
      // @ts-ignore
      this.map && this.map.addLayer(this.deviceLayer)
    },
    setCurrent (row) {
      // @ts-ignore
      this.$refs.updateChild.setCurrentRow(row)
    },
    handleCurrentChange (val) {
      // @ts-ignore
      this.currentRow = val
    },
    setCurrentMarker (dev) {
      let marker
      // @ts-ignore
      let layers = this.deviceLayer._layers
      for (var x in layers) {
        let layer = layers[x]
        if (layer.options.icon.options.alt.id === dev.id) {
          marker = layer
          break
        }
      }
      if (marker) {
        let _latlng = marker._latlng
        // @ts-ignore
        this.map && this.map.flyTo(_latlng)
        marker.openPopup(_latlng)
      }
    },
    onRowClick (row) {
      this.setCurrentMarker(row)
    },
    drawLine (latlngs, options) {
      let res
      // 轨迹线
      let _this = this
      let routeLine = L.polyline(latlngs, options).addTo(_this.map).on('click', function (e) {
        let id = e.target._leaflet_id
        // @ts-ignore
        let item = _this.lineArr.filter(ele => ele.id === id)[0]
        if (_this.chooseId === item.route.id) {
          console.log('no change')
          return false
        }
        // tab切换
        _this.chooseId = item.route.id
        // 高亮
        _this.oldLine.setStyle(_this.options)
        routeLine.setStyle(_this.newOptions)
        // @ts-ignore
        _this.oldLine = routeLine
      })
      // 轨迹方向箭头
      // @ts-ignore
      let decorator = L.polylineDecorator(routeLine, {
        patterns: [{
          repeat: 50,
          // @ts-ignore
          symbol: L.Symbol.arrowHead({
            pixelSize: 5,
            headAngle: 75,
            polygon: false,
            pathOptions: {
              stroke: true,
              weight: 2,
              color: '#FFFFFF'
            }
          })
        }]
      }).addTo(this.map)
      let lineId = routeLine._leaflet_id
      res = {
        lineId: lineId,
        routeLine: routeLine,
        decorator: decorator
      }
      return res
    },
    getGisConfig () {
      let _this = this
      // @ts-ignore
      return new Promise((resolve, reject) => {
        let reqData = {
          module: 'gis',
          isValid: true
        }
        // @ts-ignore
        SystemconfigApi.GetSystemconfigList(reqData).then((data) => {
          let res = data.data
          if (!res.success) {
            console.log('datas:' + res)
          } else {
            let w = document.getElementsByClassName('showLayout')[0]
            // @ts-ignore
            w.style.width = '400px'
            // w.style.height = '960px'
            // @ts-ignore
            w.style.height = '820px'
            for (let config of data.data.data) {
              if (config['key'] === 'isShowVideo') {
                if (config['value'] === 'true') {
                  _this.isShowVideo = true
                  // reset panel
                  // @ts-ignore
                  w.style.width = '800px'
                } else {
                  _this.isShowVideo = false
                }
                break
              }
            }
            resolve(data.data.data)
          }
        })
      })
    },
    // @ts-ignore
    async isShowVideos (node) {
      await this.getGisConfig()
    },
    research () {
      this.setRoute()
    },
    onPlayClick (dev) {
      this.zoomBiz = 'play'
      this.isZoomShow = true
      this.curDevice = dev
      console.log('this.curDevice', this.curDevice)
    },
    onConfigClick (dev) {
      console.log('onConfigClick', dev)
      this.curDevice = dev
      this.manualInfo = dev.data.data
      // this.curDevice.data = {'agentid': 'bclgkxl', 'direction': [14, 6, 13, 8], 'peddirection': [1], 'greenflash': 6, 'duration': 600, 'yellow': 3, 'redclear': 2, 'mingreen': 15}
      this.zoomBiz = 'config'
      this.isZoomShow = true
    },
    onCardClick (dev) {
      let contents = this.getPopupContent(dev)
      let latlng = dev.geometry.coordinates.slice().reverse()
      this.popup = L.popup()
        .setLatLng(latlng)
        .setContent(contents)
        .openOn(this.map)
    },
    onDeviceIdsChange () {
      if (this.chooseId) {
        let currentDeviceIds = []
        // @ts-ignore
        let currentRoute = this.routeList.filter(item => item.id === this.chooseId)[0]
        currentRoute = currentRoute || this.routeData
        let devs = currentRoute.devs
        for (let dev of devs) {
          currentDeviceIds.push(dev.agentid)
        }
        this.$emit('onDeviceIdsChange', currentDeviceIds)
      }
    }
  }
}
</script>
<style>
.lmap-container {
  /* border: 2px solid red; */
}
.lmap-icon {
  /* border: 1px solid red; */
}
 .lmap-image {
    width: 32PX;
    height: 31PX;
  }

  .lmap-span {
    width: 30PX;
    height: 30PX;
    margin-left: -4PX;
    border-radius: 50%;
    background-color: red;
    font-family: SourceHanSansCN-Bold;
    font-size: 16PX;
    font-weight: bold;
    font-stretch: normal;
    line-height: 14PX;
    letter-spacing: 0PX;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
  }
  .lmap-span-optimize {
    background-color: #5acd4c;
  }
  .lmap-span-group {
    background-color: #e0ac24;
  }
  .lmap-span-route {
    background-color: #37ccaa;
  }
</style>
